<template>
<!-- // 社区简介详情 -->
  <div class="Introduction">
    <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="title" left-arrow @click-left="$router.go(-1)" />
    
    <!-- 社区简介 -->
    <div class="instructions">
      <div class="instruc-box">
        <!-- 社区名 -->
        <div class="fl ">
          <div class="instruc-title">{{title}}</div>
          <div class="van-cells">
            <div class="instruc-map">{{map}}</div>
          </div>
        </div>
      </div>
      <!-- 简介 -->
      <div class="instruc-Community">
        <!--社区简介 -->
        <div class="community">
          <span>社区简介</span>
          <div class="title-city">{{community}}</div>
        </div>
        <!--社区宗旨 -->
        <div class="community">
          <span>社区宗旨</span>
          <div class="title-city">{{communitys}}</div>
        </div>
        <!-- banner图 -->
        <div class="Intr-img">
          <img src="../../assets/img/banner3.png" alt="">
        </div>
      </div>
      
    </div>
    
  </div>
</template>
<script>
import { Toast } from 'vant';
   export default {
    data() {
      return {
        title: "教师姓名",
        map:"授课方向",
        community:"西安社区（又名西安说）定位于西安的生活消费、互动交流社区。打造（真实·丰富·愉悦）的网上西安！作为本地最具成长性的生活消费分享交流的平台，是西安地区最具影响力的网络服务品牌之一，为西安人提供生活交流、消费分享、购物指导等实用服务，通过西安说社区让用户快乐追求更高质量高效率的生活。",
        communitys:"西安社区（又名西安说）定位于西安的生活消费、互动交流社区。打造（真实·丰富·愉悦）的网上西安！作为本地最具成长性的生活消费分享交流的平台，是西安地区最具影响力的网络服务品牌之一，为西安人提供生活交流、消费分享、购物指导等实用服务，通过西安说社区让用户快乐追求更高质量高效率的生活。"
      }
    }
  }
</script>
<style scoped>
  .van-nav-bar__right span{
    color: #D33043!important;
  }
  .Intr-img{
    height: 9rem;
  }
  .instructions{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 1rem;
  }

  .instructions .instruc-box::after {
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
  }
  .instruc-title{
    
    color: #000000;
    font-size: 0.8rem;
  }
  .instruc-title::after{
    position: absolute;
    left: -10px;
    /* top: 28px; */
    content: '';
    width: 3px;
    border-top: 18px solid #D33043;
  }
  .instruc-map{
    font-size: 0.6rem;
    color: #999999;
   
  }
  .instruc-box{
    position: relative;
    padding: 0.8rem 0 0.5rem 0;
  }
  .van-icon{
    min-width: 1em;
    font-size: 16px;
    line-height: 24px;
    margin-right: 5px;
  }
  .van-cells {
     margin-top: 0.3rem;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 24px;
    color: #333;
    font-size: 14px;
    overflow: hidden;
  }
  .share{
    background-color: #D33043;
    color: #ffffff;
    margin: 0;
    padding: 0.05rem 0.5rem;
    border-radius: 20px;
  } 
  /* 简介 */
  .community span{
    color: #333333;
    font-size: 0.6rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    display: inline-block;
  }
  .title-city{
    font-size: 0.6rem;
    line-height: 0.9rem;
  }
  .community{
    margin-bottom: 0.3rem;
  }
</style>